import React, { useState } from "react";
import { post, get1 as get } from "@/Utils/http";
import axios from "axios";
function Storage() {
  const [list, setlist] = useState([]);
  React.useEffect(() => {
    window.localStorage.getItem("info");
    if (window.localStorage.getItem("info")) {
      setlist(JSON.parse(window.localStorage.getItem("info")));
      console.log(JSON.parse(window.localStorage.getItem("info")));
    } else {
      get("https://randomuser.me/api/?results=5").then((res) => {
        console.log(res);
        setlist(res);
        window.localStorage.setItem("info", JSON.stringify(res));
      });
    }
  }, []);

  const trFn = (val, i) => {
    console.log(val, i);
  };
  return (
    <div>
      <table width="800px" cellPadding="0" cellSpacing="0">
        <thead>
          <tr>
            <th>img</th>
            <th>Last</th>
            <th>First</th>
            <th>Username</th>
            <th>Phone</th>
            <th>Location</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {list &&
            list.map((v, i) => (
              <tr
                key={i}
                style={{
                  backgroundColor: i % 2 !== 1 ? "#ccc" : "",
                }}
                onClick={() => trFn(v, i)}
              >
                <th>
                  <img
                    src={v.picture.large}
                    alt=""
                    // width="20px"
                    // height="40px"
                    style={{
                      width: 50,
                      height: 50,
                      borderRadius: "50%",
                    }}
                  />
                </th>
                <th>{v.name.last}</th>
                <th>{v.name.first}</th>
                <th>{v.login.username}</th>
                <th>{v.phone}</th>
                <th>{v.location.city}</th>
                <th>
                  <button>+</button>
                </th>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
}

export default Storage;
